<template>
	<view class="competition-page">
		<view class="select-area-sty" v-if="fla == 0">
			<view style="flex:1;text-align: left;margin-left: 30rpx;">
				<uni-datetime-picker type="datetime" return-type="string" placeholder="报名日期" v-model="fbTime"
					@change="changeLog" />
			</view>
			<view style="flex:1;text-align: center;">
				级别
				<uni-data-select v-model="lv" :localdata="level" @change="changeLevel"></uni-data-select>
			</view>
		</view>
		<view style="padding: 32rpx;">
			<view v-for="item in newsList" :key="item._id" class="news-area" @click="toNewsDetail(item)">
				<view style="width: 190rpx;height: 62px;display: inline-block;vertical-align: top;"><img
						style="width: 100%;height: 62px;" :src="item.imgUrl" alt=""></view>
				<view style="display: inline-block;margin-left: 20rpx;position: relative;width: 68%;height: 62px;">
					<view class="text-title">{{item.title}}</view>
					<view style="font-size: 20rpx;position: absolute;bottom: 0;">
						<text>报名时间：{{item.regTime[0].substring(0,10)}} 至 {{item.regTime[1].substring(0,10)}}</text>
						<!-- <text>{{item.created_by}}</text> -->
					</view>
					<view class="state-sty"
						:style="item.state == 0 ? 'background-color: #ffa52d;':item.state == 1 ?'background-color: red;':'background-color: #04a51c;'">
						{{item.stateNm}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDataFn
	} from '@/utils/baseFn.js';
	const db = uniCloud.database();
	const dbCmd = db.command;
	export default {
		data() {
			return {
				newsList: [],
				where: `"deleted_at"==null`,
				tmpWhere: {deleted_at:null},
				level: [{
						value: '0',
						text: '公开组'
					},
					{
						value: '1',
						text: '职工组'
					},
					{
						value: '',
						text: '全部'
					}
				],
				lv: '',
				fbTime: '',
				skipNum: 0,
				fla: 0
			}
		},
		created() {
			
		},
		onLoad (e) {
			if (e.id) {
				this.fla = 1
			}
			this.getNewsList(e.id)
		},
		mounted() {},
		methods: {
			getNewsList(id) {
				if (id) {
					this.where = `${this.where}&&"_id"=="${id}"`
				}
				getDataFn('competition-MGMT', this.where, this.skipNum, 'title,regTime,state,annexId').then(
					res => {
						console.log(res)
						const arr = []
						res.data.map(item => {
							const file = item.annexId.split(',')
							item.imgUrl = `${this.$baseImgUrl}${file[0]}`
							item.regTime = JSON.parse(item.regTime)
							item.stateNm = item.state == 0 ? '报名中' : item.state == 1 ? '报名结束' : item.state ==
								2 ? '比赛中' : '比赛结束'
							arr.push(item)
						})
						// this.total = res.sn
						this.newsList = this.newsList.concat(arr)
						this.skipNum = this.newsList.length
					})
			},
			toNewsDetail(item) {
				uni.navigateTo({
					url: `competitionDetail?id=${item._id}`
				});
			},
			initData() {
				this.newsList = []
				this.skipNum = 0
				this.getNewsList()
			},
			changeLevel(e) {
				let str = {
					...this.tmpWhere
				}
				if (e) {
					str.raceType = e
				}
				if (this.fbTime) {
					str.regTime = new RegExp(this.fbTime.trim())
					// str.raceTime = new RegExp(this.fbTime.trim())
				}
				this.where = str
				this.initData()
			},
			changeLog(e) {
				let str = {
					...this.tmpWhere
				}
				if (e) {
					str.regTime = new RegExp(e.trim())
					// str.raceTime = new RegExp(e.trim())
				}
				if (this.lv) {
					str.raceType = this.lv
				}
				this.where = str
				this.initData()
			}
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			// this.skipNum = this.skipNum + 20
			this.getNewsList()
		}
	}
</script>

<style>
	.competition-page {}

	.select-area-sty {
		height: 55px;
		display: flex;
		background-color: #fff;
		line-height: 50px;
	}

	.competition-page .uni-select,
	.competition-page .uni-date-x--border {
		border: none;
		border-bottom: none;
	}

	.competition-page .uni-stat__select {
		width: 120px;
		display: inline-block;
	}

	.news-area {
		margin-bottom: 30px;
	}

	.state-sty {
		width: 75px;
		height: 30px;
		line-height: 30px;
		color: #fff;
		border-radius: 2px;
		text-align: center;
		position: absolute;
		top: 0;
		right: 0;
	}
	.text-title {
		font-size: 15px;
		font-family: 600;
		width: 70%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
<style lang="scss">
</style>